<template>
  <div class="app-container">
    <el-form ref="form"
             :model="form"
             :rules="rules"
             :label-position="labelPosition"
             class="register-form">
      <el-row :gutter="60">
        <el-col :span="8">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="reportNo" label="报告文号">
                <el-input v-model="form.reportNo" type="text" auto-complete="off" placeholder="请输入事务所名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="customerName" label="客户名称（被审验单位名称）">
                <el-input v-model="form.customerName" type="text" auto-complete="off" placeholder="请输入客户名称（被审验单位名称）" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="customerBusinessLicense" label="客户营业执照号">
                <el-input v-model="form.customerBusinessLicense" type="text" auto-complete="off" placeholder="请输入客户营业执照号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="firmName" label="事务所名称">
                <el-input v-model="form.firmName" type="text" auto-complete="off" placeholder="请输入事务所名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="administrativeDivision" label="事务所行政区划">
                <el-input v-model="form.administrativeDivision" type="text" auto-complete="off" placeholder="请输入事务所行政区划" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="firstBusinessTime" label="首次承接业务时间">
                <el-date-picker
                  v-model="form.firstBusinessTime"
                  type="date"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="hasSecurities" label="是否具有证券资格">
                <el-select v-model="form.hasSecurities" placeholder="请选择">
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isSecuritiesBusiness" label="是否属于证券业务">
                <el-select v-model="form.isSecuritiesBusiness" placeholder="请选择">
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="officeRemarks" label="备注">
                <el-input v-model="form.officeRemarks" type="text" auto-complete="off" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              :loading="loading1"
              size="medium"
              type="primary"
              @click.native.prevent="submit"
            >
              <span v-if="!loading1">提 交</span>
              <span v-else>提 交 中...</span>
            </el-button>
            <el-button
              size="medium"
              type="default"
              @click.native.prevent="handleClosePage"
            >
              <span>返 回</span>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item prop="reportType" label="报备类型">
                <el-select v-model="form.reportType"
                           placeholder="请选择"
                           clearable
                           filterable
                           @change="reportTypeChange"
                >
                  <el-option
                    v-for="(item,index) in reportTypeOption"
                    :key="index+'z'"
                    :label="item.dictLabel"
                    :value="item.dictValue" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="opinionType" label="意见类型(可填可选)">
                <el-select v-model="form.opinionType"
                           placeholder="请选择"
                           clearable
                           filterable
                           @blur="selectBlur"
                           @clear="selectClear"
                           @change="selectChange"
                >
                  <el-option
                    v-for="(item,index) in opinionTypeOption"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.dictValue" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="auditYear"
                            label="审计年度"
                            :required="form.reportType !== '验资业务' && form.reportType !== '专项审计业务' && form.reportType !== '其它'"
              >
                <el-date-picker
                  v-model="form.auditYear"
                  type="year"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="reportTime" label="报告日期">
                <el-date-picker
                  v-model="form.reportTime"
                  type="date"
                  placeholder="请输入报告日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item prop="reportCode" label="报备编码">
                <el-input v-model="form.reportCode" type="text" auto-complete="off" placeholder="请输入报备编码" />
              </el-form-item>
            </el-col>
            <el-col :span="6" v-judgeAccount="0">
              <el-form-item prop="filingYear" label="报备年度">
                <el-date-picker
                  v-model="form.filingYear"
                  type="year"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="filingTime" label="报备日期">
                <el-date-picker
                  v-model="form.filingTime"
                  type="date"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="reportStatus" label="报备状态">
                <el-select v-model="form.reportStatus" placeholder="请选择">
                  <el-option label="已报备" value="已报备" />
                  <el-option label="未报备" value="未报备" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item prop="uploadTime" label="上传时间">
                <el-date-picker
                  v-model="form.uploadTime"
                  type="datetime"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="chargeAmount" label="收费金额（元）">
                <el-input-number v-model="form.chargeAmount" controls-position="right" :min="0" :precision="2" :max="9999999999" auto-complete="off" placeholder="请输入收费金额" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="capitalVerificationAmount" label="验资金额（元）">
                <el-input-number v-model="form.capitalVerificationAmount" controls-position="right" :min="0" :precision="2" :max="9999999999" auto-complete="off" placeholder="请输入验资金额" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="capitalVerificationCurrency" label="验资币种">
                <el-select v-model="form.capitalVerificationCurrency" placeholder="请选择"
                           clearable
                           filterable
                >
                  <el-option
                    v-for="(item,index) in currencyTypeOption"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.dictValue" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-for="(item, index) in form.assuranceBusinessDataRegisterSignatures" :key="item.registerId">
            <el-col :span="6">
              <el-form-item
                :label="`签字注会${index+1}证书号`"
                :prop="'assuranceBusinessDataRegisterSignatures.' + index + '.registrationCertificateNo'"
                :rules="{required: true, message: '签字注师证号不能为空', trigger: 'blur'}"
              >
                <el-input v-model="item.registrationCertificateNo" type="text" auto-complete="off" placeholder="请输入签字注师证号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :label="`签字注册会计师${index+1}`"
                :prop="'assuranceBusinessDataRegisterSignatures.' + index + '.registrantName'"
                :rules="{required: true, message: '签字注师姓名不能为空', trigger: 'blur'}"
              >
                <el-input v-model="item.registrantName" type="text" auto-complete="off" placeholder="请输入签字注师姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item v-if="index===0 && form.assuranceBusinessDataRegisterSignatures.length < 4" label="增加会计师">
                <span class="btnPosition" @click.prevent="addData"><i class="el-icon-plus"></i></span>
              </el-form-item>
              <el-form-item v-if="index>1" label="删除会计师">
                <span class="btnPosition" @click.prevent="removeData(item)"><i class="el-icon-minus"></i></span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
  import {getAssurance, editDraftAssurance, editAssurance, addAssurance} from "@/api/system/assurance";
  export default {
    name: "AssuranceEdit",
    data() {
      let capitalAmount = (rule, value, callback) => {
        if (this.form.reportType === '验资业务' && !value) {
          debugger
          return callback(new Error('请输入验资金额'));
        }
        callback();
      };
      let capitalCurrency = (rule, value, callback) => {
        if (this.form.reportType === '验资业务' && !value) {
          return callback(new Error('请选择验资币种'));
        }
        callback();
      };
      let yearValid = (rule, value, callback) => {
        // 报备类型为“验资业务”、“专项审计业务”、“其它”时，“审计年度”不必填。
        if (this.form.reportType !== '验资业务' && this.form.reportType !== '专项审计业务' && this.form.reportType !== '其它' && !value) {
          return callback(new Error('请输入审计年度'));
        }else{
          this.$refs.form.clearValidate(['auditYear']); // 清空单一校验
        }
        callback();
      };
      let opinionTypeValid = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('意见类型不能为空'));
          } else {
              callback();
          }
      };
      return {
        businessId: '', // 传过来的 assuranceId
        labelPosition: "top",
        form: {},
        reportTypeOption: [], // 报备类型
        currencyTypeOption: [], // 验资币种
        opinionTypeOption: [], // 意见类型
        rules: {
          firmName: [
            { required: true, trigger: "blur", message: "事务所名称不能为空" },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],
          administrativeDivision: [{ required: true, trigger: "blur", message: "事务所行政区划不能为空" }], // 事务所行政区划 200
          hasSecurities: [{ required: true, trigger: "blur", message: "是否具有证券资格不能为空" }], // 是否具有证券资格 5
          customerName: [{ required: true, trigger: "blur", message: "客户名称（被审验单位名称）不能为空" }], // 客户名称（被审验单位名称） 100
          customerBusinessLicense: [{ required: true, trigger: "blur", message: "客户营业执照不能为空" }], // 客户营业执照 100
          reportType: [{ required: true, trigger: "blur", message: "报备类型不能为空" }], // 报备类型 50
          auditYear: [{ validator: yearValid, trigger: 'blur'}], // 审计年度 20
          reportNo: [{ required: true, trigger: "blur", message: "报告文号不能为空" }], // 报告文号 50
         // chargeAmount: [{ required: true, trigger: "blur", message: "收费金额不能为空" }], // 收费金额 20
          registrationCertificateNo1: [{ required: true, trigger: "blur", message: "签字注册师证号1不能为空" }], // 签字注册师证号1 50
          registrantName1: [{ required: true, trigger: "blur", message: "签字注册师姓名2不能为空" }], // 签字注册师姓名1 20
          registrationCertificateNo2: [{ required: true, trigger: "blur", message: "签字注册师证号2不能为空" }], // 签字注册师证号2 50
          registrantName2: [{ required: true, trigger: "blur", message: "签字注册师姓名2不能为空" }], // 签字注册师姓名2 20
          isSecuritiesBusiness: [{ required: true, trigger: "blur", message: "是否属于证券业务不能为空" }], // 是否属于证券业务 5
          opinionType: [{ required: true, validator:opinionTypeValid, trigger: "blur", message: "意见类型不能为空" }], // 意见类型 10
          reportTime: [{ required: true, trigger: "blur", message: "报告日期不能为空" }], // 报告日期 20
          capitalVerificationAmount: [{validator: capitalAmount, trigger: 'blur'}], //验资金额
          capitalVerificationCurrency: [{validator: capitalCurrency, trigger: 'blur'}], //验资币种
          reportBasicDataStatus: [{ required: true, trigger: "blur", message: "报告基本数据状态不能为空" }], // 报告基本数据状态 10
        },
        loading1: false
      };
    },
    created() {
      this.businessId = this.$route.query.businessId;
      if(this.businessId){
        this.getDetail(this.businessId);
      }
      this.getDicts("report_type").then(response => {
        // 报备类型
        this.reportTypeOption = response.data;
      });
      this.getDicts("currency").then(response => {
        // 验资币种
        this.currencyTypeOption = response.data
      });
      this.getDicts("type_of_opinion").then(response => {
        // 意见类型
        this.opinionTypeOption = response.data
      });
    },
    activated() {
        this.businessId = this.$route.query.businessId;
        if(this.businessId){
            this.getDetail(this.businessId);
        }
        this.getDicts("report_type").then(response => {
            // 报备类型
            this.reportTypeOption = response.data;
        });
        this.getDicts("currency").then(response => {
            // 验资币种
            this.currencyTypeOption = response.data
        });
        this.getDicts("type_of_opinion").then(response => {
            // 意见类型
            this.opinionTypeOption = response.data
        });
    },

    methods: {
      selectBlur(e) {
        // 意见类型
        if (e.target.value !== '') {
          this.form.opinionType = e.target.value + '(其他)';
          this.$forceUpdate()
        }
      },
      selectClear() {
        this.form.opinionType = ''
        this.$forceUpdate()
      },
      selectChange(val) {
        this.form.opinionType = val
        this.$forceUpdate()
      },
      reportTypeChange(val) {
          if(val=="验资业务"){
              this.rules.opinionType =  [{ required: false, trigger: "change", message: "意见类型不能为空" }]
          }else{
              this.rules.opinionType =  [{ required: true, validator:(rule, value, callback) => {
                      if (value === '') {
                          callback(new Error('意见类型不能为空'));
                      } else {
                          callback();
                      }
                  },  trigger: "change", message: "意见类型不能为空" }]
          }
          this.$forceUpdate()
      },
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            editAssurance(this.form).then(
              response => {
                this.$confirm('修改成功', '提示', {
                  confirmButtonText: '返回',
                  showClose: false,
                  showCancelButton: false,
                  type: 'success'
                }).then(() => {
                  this.loading1 = false;
                   this.$store.dispatch("tagsView/delView", this.$route);
                  this.colseCurWin();
                });
              }
            ).catch(()=>{
            });
          }
        });
      },
      handleClosePage() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.colseCurWin();
      },
      getDetail(businessId){
        getAssurance(businessId).then(
          response => {
            this.form = response.data;
          }
        );
      },
      addData() {
        this.form.assuranceBusinessDataRegisterSignatures.push({
          registrantName: '',
          registrationCertificateNo: ''
        },);
      },
      removeData(item) {
        let index = this.form.assuranceBusinessDataRegisterSignatures.indexOf(item)
        if (index !== -1) {
          this.form.assuranceBusinessDataRegisterSignatures.splice(index, 1)
        }
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-form-item__label{
    position: relative;
    font-size: 15px;
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';  // 去掉 * 号
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';  // 后置 * 号
    color: #ff4949;
    margin-right: 4px;
    right: -15px;
    top: 2px;
    position: absolute;
  }
  ::v-deep .el-input__inner{
    &::-webkit-input-placeholder {
      font-size: 13px;
    }
  }
  ::v-deep .el-date-editor.el-input, ::v-deep .el-select{
    width: 100%;
  }
  .btnPosition{
    display: inline-block;
    text-align: center;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    cursor: pointer;
    border-radius: 4px;
    color: #848ae3;
    font-size: 18px;
    font-weight: 900;
    border: 1px solid rgba(132,138,227,.3);
    background: #fff;
    &:hover{
      border: 1px solid rgba(132,138,227,.9);
    }
  }
  .poBtn{
    margin-top: 50px;
    display: block;
    text-align: center
  }
</style>
